<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>录播列表</title>
    #include("common/header.html")
    <link rel="stylesheet" href="/css/table.css"/>
</head>

<body>
<div class="admin-main">

    <blockquote class="layui-elem-quote">
        <a href="javascript:add();" class="layui-btn layui-btn-small">
            <i class="layui-icon">&#xe608;</i> 添加轮播图
        </a>
    </blockquote>
    <fieldset class="layui-elem-field">
        <legend>轮播图列表</legend>
        <div class="layui-field-box layui-form">
            <table class="layui-table admin-table">
                <thead>
                <tr>
                    <th>标题</th>
                    <th>图片</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody id="pager">
                #foreach($item in $data)
                <tr>
                    <td>$!item.title</td>
                    <td>
                        <img src="$!item.imgUrl" width="200px" height="120px;">
                    </td>
                    <td>
                        <a onclick="del($item.id)" class="layui-btn layui-btn-danger layui-btn-mini">删除</a>
                    </td>
                </tr>
                #end
                </tbody>
            </table>
        </div>
    </fieldset>
</div>
</body>

<script type="text/javascript">

    var layer;
    layui.use('layer', function () {
        layer = layui.layer;
    });



    function del(id) {

        //询问框
        layer.confirm('确定删除?', {
            btn: ['确定','取消'] //按钮
        }, function(){
            $.ajax({
                url: "/banner/"+id,
                type: "delete",
                dataType: "json",
                success: function (r) {
                    console.log(r);

                    if(r.code == -1){
                        layer.msg(r.msg);
                        return;
                    }

                    layer.msg('删除成功!',{time:1000}, function(){
                        location.reload();
                    });
                }
            });
        });
    }

    function add() {
        layer.open({
            type: 2,
            title: '添加轮播图',
            shadeClose: true,
            shade: false,
            maxmin: true, //开启最大化最小化按钮
            area: ['650px', '450px'],
            content: '/banner/add',
            btn: ['确定', '取消'],
            yes: function (index, layero) {

                var body = layer.getChildFrame('body',index);

                var title = body.find("#title").val();
                var imgUrl = body.find("#imgUrl").attr("data-src");

                $.ajax({
                    url: "/banner/",
                    type: "post",
                    dataType: "json",
                    data: {
                        "title": title,
                        "imgUrl":imgUrl
                    },
                    success: function (r) {
                        console.log(r);

                        if (r.code == -1) {
                            layer.msg(r.msg);
                            return;
                        }

                        layer.close(index);
                        layer.msg('添加成功!', {time: 1000}, function () {
                            location.reload();
                        });
                    }
                });

            }
        });
    }

</script>

</html>